<script setup lang="ts">
  import { options } from './index';
  import useLoading from '@/hooks/loading';
  import { jsondata } from '@/types';
  const { loadingIcon, setLoading } = useLoading();
  /** 编辑器初始值 */
  const value = ref<string>(``);
  /** 选择的语言 */
  const language = ref<string>('');
  const languageValue = ref<string>('');
  const height = ref<string>('calc(100vh - 130px)'); // 111px
  const emit = defineEmits<Emits>();
  interface Emits {
    (e: 'update:value'): void;
  }

  const props = defineProps({
    data: {
      type: String,
      default: '',
    },
    elementJson: {
      type: Object,
      default: () => {},
    },
  });
  watch(
    () => props.data,
    async () => {
      language.value = '';
    },
  );
  watch(language, async (val: string) => {
    switch (val) {
      case 'html':
        languageValue.value = 'html';
        value.value = props.elementJson.global_page.html;
        break;
      case 'css':
        languageValue.value = 'css';
        value.value = props.elementJson.global_page.css;
        break;
      case 'scss':
        languageValue.value = 'scss';
        value.value = props.elementJson.global_page.scss;
        break;
      case 'javascript':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.javascript;
        break;
      case 'typescript':
        languageValue.value = 'typescript';
        value.value = props.elementJson.global_page.typescript;
        break;
      case 'handlebars':
        languageValue.value = 'handlebars';
        value.value = props.elementJson.global_page.handlebars;
        break;
      case 'razor':
        languageValue.value = 'razor';
        value.value = props.elementJson.global_page.razor;
        break;
      case 'sql':
        languageValue.value = 'sql';
        value.value = props.elementJson.global_page.sql;
        break;
      case 'json':
        languageValue.value = 'json';
        value.value = props.elementJson.global_page.json;
        break;
      case 'cssEmbedded':
        languageValue.value = 'css';
        value.value = props.elementJson.global_page.cssEmbedded;
        break;
      case 'jsembedded':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.jsembedded;
        break;
      case 'vueMethods':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.vueMethods;
        break;
      case 'vueMounted':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.vueMounted;
        break;
      case 'vueWatch':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.vueWatch;
        break;
      case 'computed':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.computed;
        break;
      case 'embedFile':
        languageValue.value = 'html';
        value.value = props.elementJson.global_page.embedFile;
        break;
      case 'vueData':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.vueData;
        break;
      case 'copyRowFunction':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.copyRowFunction
          ? props.elementJson.global_page.copyRowFunction
          : '//name 为复制行的字段名\n//yang_cypelistrow(this.data_（替换成真实的数据列表）, name);';
        break;
      case 'scanFunction':
        languageValue.value = 'javascript';
        value.value = props.elementJson.global_page.scanFunction
          ? props.elementJson.global_page.scanFunction
          : '// parse.unitCode 单元编号 ，parse.field 元素字段  ，parse.value 扫描值  ';
        break;
    }
  });

  const SubmitEvent = async () => {
    setLoading(true);
    emit('update:value');
    setLoading(false);
  };
  /** 接收组件的值 */
  const hanldUpdateWeb = async (val) => {
    switch (language.value) {
      case 'html':
        jsondata.value.global_page.html = val;
        break;
      case 'css':
        jsondata.value.global_page.css = val;
        break;
      case 'scss':
        jsondata.value.global_page.scss = val;
        break;
      case 'javascript':
        jsondata.value.global_page.javascript = val;
        break;
      case 'typescript':
        jsondata.value.global_page.typescript = val;
        break;
      case 'handlebars':
        jsondata.value.global_page.handlebars = val;
        break;
      case 'razor':
        jsondata.value.global_page.razor = val;
        break;
      case 'sql':
        jsondata.value.global_page.sql = val;
        break;
      case 'json':
        jsondata.value.global_page.json = val;
        break;
      case 'cssEmbedded':
        jsondata.value.global_page.cssEmbedded = val;
        break;
      case 'jsembedded':
        jsondata.value.global_page.jsembedded = val;
        break;
      case 'vueMethods':
        jsondata.value.global_page.vueMethods = val;
        break;
      case 'vueMounted':
        jsondata.value.global_page.vueMounted = val;
        break;
      case 'vueWatch':
        jsondata.value.global_page.vueWatch = val;
        break;
      case 'computed':
        jsondata.value.global_page.computed = val;
        break;
      case 'embedFile':
        jsondata.value.global_page.embedFile = val;
        break;
      case 'vueData':
        jsondata.value.global_page.vueData = val;
        break;
      case 'copyRowFunction':
        jsondata.value.global_page.copyRowFunction = val;
        break;
      case 'scanFunction':
        jsondata.value.global_page.scanFunction = val;
        break;
    }
  };
  const hanldUpdateJson = () => {};

  /**
   * value:编辑器代码显示的值
   * language:要加载的语言类型
   * hightChange:改变编辑器的高度（可去掉，sql查表的实现，需要在编辑区下面加一个sql查询的表格，所以需要这个参数）
   * read-only:编辑区是否是只读的，当左侧文件树为空时没有文件，编辑区不可写
   * editorMounted:加载完成操作
   */
</script>

<template>
  <div class="MikeWebEditor">
    <div class="MikeWebEditor_select">
      <ElSelect v-model="language" placeholder="请选择语言编译" size="large">
        <ElOption
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
      <ElButton type="primary" :loading="loadingIcon" @click="SubmitEvent">保存代码</ElButton>
    </div>
    <WebEditor
      @change="hanldUpdateWeb"
      @update:modelValue="hanldUpdateJson"
      v-if="languageValue"
      v-model="value"
      :language="languageValue"
      width="100%"
      :height="height"
    />
    <!-- :hight-change="hightChange"
              :read-only="tablist.length === 0" -->
  </div>
</template>

<style lang="scss" scoped>
  .MikeWebEditor {
    box-sizing: border-box;
    padding: 0 20px;
    height: calc(100vh - 55px);
    &_select {
      width: $width;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 15px;
      :deep(.el-button) {
        margin-left: 20px;
      }
    }
  }
</style>
